<template>
    <div class="knowledge-editor-container">
        <!-- 头部区域 -->
        <header class="editor-header">
            <div class="header-content">
                <!-- 左侧标题 -->
                <h1 class="knowledge-title">{{ selectedKnowledge.name }}</h1>

                <!-- 右侧操作按钮 -->
                <div class="action-buttons">
                    <a-button type="primary" @click="handlePublish">发布</a-button>
<!--                    <a-button @click="handleSave">保存</a-button>-->
                    <a-button @click="handleCancel">返回</a-button>
                </div>
            </div>
        </header>

        <!-- 编辑器区域 -->
        <main class="editor-main">
            <!-- 新增文件名输入框 -->
            <div class="file-name-input">
                <a-input class="file-name"
                    v-model:value="fileName"
                    placeholder="请输入文件名"
                />
            </div>
            <RxMarkDown
                class="markdown-editor"
                @valueChange="handleContentChange"
            />
        </main>
    </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';
import knowledgeBaseDetails from "@/common/api/knowledge/knowledgeBaseDetails";
import { RxMarkDown } from "@lowcode/jpaas-share-component";
import {message} from 'ant-design-vue';
const emit = defineEmits(['close-editor']);

// 接收外部传入的知识库名称
const props = defineProps({
    selectedKnowledge:{
        type:Object,
        default:{}
    },
    knowledgeId:{
        type: String,
        default: "",
    }
});

// 编辑器内容
const editorContent = ref('');
// 文件名
const fileName = ref('');

// 处理内容变化
const handleContentChange = (content) => {
    editorContent.value = content;
};

// 操作处理函数
const handlePublish = async () => {
    if(!fileName.value){
        message.error("请输入文本标题");
        return
    }
    const params = {
        knowledgeId : props.knowledgeId,
        name:fileName.value,
        content:editorContent.value,
        parentId:props.selectedKnowledge.id,
    }
    await knowledgeBaseDetails.createText(params)
};

const handleSave = () => {
    if (fileName.value) {
        console.log('保存内容:', editorContent.value);
        console.log('文件名:', fileName.value);
        // 这里添加保存逻辑
    }
};

const handleCancel = () => {
    emit('close-editor');  // 新增关闭事件
};
</script>

<style scoped lang="scss">
.knowledge-editor-container {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

.editor-header {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 24px;

    .header-content {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.knowledge-title {
    margin: 0;
    font-size: 20px;
    color: #1a1a1a;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.editor-main {
    flex: 1;
    padding: 24px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;

    .file-name-input {
        margin-bottom: 16px;
        display: flex;
        .file-name{
            width: 500px;
            border: none !important;
            font-size: 24px;
        }
    }

    .markdown-editor {
        height: calc(100vh - 150px) !important; /* 减去头部和padding */

        :deep(.v-note-wrapper) {
            height: 85%;
            overflow-y: auto ;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            z-index: 99;
        }
    }
}

</style>
